<template>
	<view class="mr-calendar-item" :class="[
          { 'mr-calendar-item--disabled': day.isDisabled },
          { 'mr-calendar-item--virtual': day.virtual },
          { 'mr-calendar-item--today': day.isToday },
          { 'mr-calendar-item--single-selected': selected === 'single' },
          { 'mr-calendar-item--range-selected': selected === 'range' },
          { 'mr-calendar-item--first-selected': selected === 'first' },
          { 'mr-calendar-item--last-selected': selected === 'last' },
		  { 'mr-calendar-item--first2-selected': selected === 'first2' },
		  { 'mr-calendar-item--last2-selected': selected === 'last2' },
          customDate.cellClass
        ]" @click="onDayClick">
		<view class="mr-calendar-item__top">
			<view v-for="(item, index) in topList" :class="[item.class || 'ei-calendar-item__top__item']" :key="index">
				{{item.text}}
			</view>
		</view>
		<view class="mr-calendar-item__center">
			<view class="ei-calendar-item__center__day">{{day.day}}</view>
		</view>
		<view class="mr-calendar-item__bottom">
			<view v-if="day.isToday" class="mr-calendar-item__bottom__today">今天</view>
		</view>
	</view>
</template>

<script>
	import EDate from './EDate';

	export default {
		name: 'mr-calendar-item',
		props: {
			day: {
				type: Object,
				required: true
			},
			cellClass: {
				type: Object,
				default: () => ({})
			},
			type: String,
			selectedValue: [String, Number],
			selection: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			selected() {
				const time = this.day.time;
				if ('single' === this.type) {
					return time === this.selectedValue ? 'single' : false;
				}
				const index = this.selection.findIndex(item => item === time);
				if (this.type === 'multiple'||this.type==="mutiple-range") {
					return index < 0 ? false : 'single';
				}
				let lastIndex = (this.selection.length || 1) - 1;
				if (index === 0) {
					return 'first';
				}
				if (index === 2) {
					return 'first2';
				}
				if (index === lastIndex) {
					return 'last';
				}
				if (index === 3) {
					return 'last2';
				}
				if (this.selection.length == 2) {
					return time >= this.selection[0] && time <= this.selection[lastIndex] ? 'range' : false;
				}
				if (this.selection.length == 4) {
					lastIndex=1;
					let lastIndex2 = (this.selection.length || 3) - 1;
					if (time >= this.selection[0] && time < this.selection[lastIndex]) {
						return 'range'
					}
					if (time >= this.selection[2] && time <= this.selection[lastIndex2]) {
						return 'range'
					}
				}
			},
			customDate() {
				return this.day.customDate || {};
			},
			topList() {
				return this.customDate.top || [];
			},
			centerList() {
				return this.customDate.center || [];
			},
			bottomList() {
				return this.customDate.bottom || [];
			}
		},
		methods: {
			onDayClick() {
				const day = this.day;
				this.$emit('click', day, day.isDisabled, day.virtual);
			}
		},
	};
</script>

<style scoped lang="scss">
	@import "../../uni";
	$color-primary: #519D76;

	.mr-calendar-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		line-height: 1.2 * $uni-font-size-base;
		box-sizing: border-box;
		width: 100%;
		padding: 1upx;
		color: $uni-text-color;

		&--disabled {
			opacity: 0.3;
		}

		&--today {
			color: rgba(253, 46, 50, .7);
		}

		&--single-selected {
			background: $color-primary;
			color: #fff;
			border-radius: $uni-border-radius-base;
		}

		&--range-selected {
			background: mix(#fff, $color-primary, 80%);
			color: #fff;
			opacity: 0.8;

			&.mr-calendar-item--virtual {
				opacity: .3;
			}
		}

		&--first-selected {
			background: $color-primary;
			color: #fff;
			border-top-left-radius: $uni-border-radius-base;
			border-bottom-left-radius: $uni-border-radius-base;
			opacity: 0.8;

			&.mr-calendar-item--virtual {
				opacity: .5;
			}
		}

		&--first2-selected {
			background: $color-primary;
			color: #fff;
			border-top-left-radius: $uni-border-radius-base;
			border-bottom-left-radius: $uni-border-radius-base;
			opacity: 0.8;

			&.mr-calendar-item--virtual {
				opacity: .5;
			}
		}

		&--last-selected {
			background: $color-primary;
			color: #fff;
			border-top-right-radius: $uni-border-radius-base;
			border-bottom-right-radius: $uni-border-radius-base;
			opacity: 0.8;

			&.mr-calendar-item--virtual {
				opacity: .5;
			}
		}

		&--last2-selected {
			background: $color-primary;
			color: #fff;
			border-top-right-radius: $uni-border-radius-base;
			border-bottom-right-radius: $uni-border-radius-base;
			opacity: 0.8;

			&.mr-calendar-item--virtual {
				opacity: .5;
			}
		}

		&--virtual {
			opacity: 0.1;
		}

		&__top {
			height: 1.2 * $uni-font-size-base;
			font-size: 24upx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			&__item {
				width: 10upx;
				height: 10upx;
				border-radius: $uni-border-radius-circle;
				background: rgba(253, 46, 50, .7);
			}
		}

		&__center {
			font-weight: bold;
			height: 1.2 * $uni-font-size-base;
			text-align: center;
		}

		&__bottom {
			height: 1.2 * $uni-font-size-base;
			text-align: center;
			font-size: 24upx;
		}
	}
</style>
